/* Global Stylesheet */

@import 'tailwind.postcss';

/* Ad Styles */
@import 'app-ads.postcss';

/* Google Fonts */
@font-face {
	font-family: 'Quicksand';
	src: url('/fonts/Quicksand.ttf');
	font-display: swap;
}
@font-face {
	font-family: 'Space Grotesk';
	src: url('/fonts/SpaceGrotesk.ttf');
	font-display: swap;
}
@font-face {
	font-family: 'Playfair Display';
	src: url('/fonts/PlayfairDisplay-Italic.ttf');
	font-display: swap;
}
@font-face {
	font-family: 'Abril Fatface';
	src: url('/fonts/AbrilFatface.ttf');
	font-display: swap;
}

html,
body {
	@apply h-full overflow-hidden;
}

/* Page Styles */
/* Use these to define common page styles. */
.page-container {
	@apply container mx-auto page-padding space-y-10;
}
.page-container-wide {
	@apply w-full max-w-7xl mx-auto space-y-10;
}
.page-container-aside {
	@apply w-full max-w-4xl mx-auto space-y-10;
}
.page-padding {
	@apply p-4 md:p-10;
}
.page-section {
	@apply space-y-4;
}

/* Progress Bar - Custom Animation Example */
.anim-progress-bar-example {
	transform-origin: 0% 50%;
	animation: anim-progress-bar-example 2s infinite linear;
}
@keyframes anim-progress-bar-example {
	0% {
		transform: translateX(50%) scaleX(0.5);
	}
	50% {
		transform: translateX(0) scaleX(0.5);
	}
	100% {
		transform: translateX(50%) scaleX(0.5);
	}
}
